<template>
    <div class="app-container">

        <!-- 搜索表单 -->
        <!-- ref定义表单元素引用名 :inline设置表单项水平排列 clearable设置清除按钮 -->
        <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
            <el-form-item label="品牌名称" prop="name">
                <!-- 对输入的品牌名称进行双向绑定，提供清除选项 -->
                <el-input v-model="queryParams.name" placeholder="请输入品牌名称" clearable />
            </el-form-item>
            <el-form-item>
                <!-- 搜索按钮，点击触发handleQuery方法 -->
                <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
                <!-- 重置按钮，点击触发resetQuery方法 -->
                <el-button icon="Refresh" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>

        <!-- 功能按钮栏 -->
        <!-- 使用多个列来排列按钮 -->
        <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
                <!-- 新增按钮，点击触发handleAdd方法 -->
                <el-button type="primary" plain icon="Plus" @click="handleAdd"
                    v-hasPermi="['product:brand:add']">新增</el-button>
            </el-col>
            <el-col :span="1.5">
                <!-- 修改按钮，点击触发handleEdit方法 noSingle 为true时按钮禁用，表示不能进行修改操作 -->
                <!-- handleUpdate函数后不能加() 加括号会传递一个空参数 传递空参数在js中无法使用undefined 进行判断 -->
                <el-button type="success" plain icon="Edit" :disabled="noSingle" @click="handleUpdate"
                    v-hasPermi="['product:brand:edit']">修改</el-button>
            </el-col>
            <el-col :span="1.5">
                <!-- 删除按钮，点击时触发handleDelete方法 -->
                <!-- noSelect为true时按钮禁用，表示不能进行删除操作 -->
                <el-button type="danger" plain icon="Delete" :disabled="noSelect" @click="handleDelete"
                    v-hasPermi="['product:brand:remove']">删除</el-button>
            </el-col>
            <!-- 隐藏或显示搜索框按钮 -->
            <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
        </el-row>

        <!-- 数据展示表格 -->
        <!-- 表格数据绑定，并监听selection-change事件 -->
        <el-table v-loading="loading" :data="brandList" @selection-change="handleSelectionChange">
            <!-- 选择列，用于多选 -->
            <el-table-column type="selection" width="55" align="center" />
            <!-- 展示品牌名称 -->
            <el-table-column label="品牌名称" prop="name" width="200" />
            <!-- 品牌图标展示，动态绑定图像URL -->
            <el-table-column label="品牌图标" prop="logo" #default="scope">
                <img :src="scope.row.logo" width="50" />
            </el-table-column>
            <!-- 展示创建时间 -->
            <el-table-column prop="createTime" label="创建时间" />
            <!-- 操作列，提供修改和删除功能 -->
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                <template #default="scope">
                    <!-- 修改按钮，触发handleUpdate方法 -->
                    <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)"
                        v-hasPermi="['product:brand:edit']">修改</el-button>
                    <!-- 删除按钮，触发handleDelete方法 -->
                    <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)"
                        v-hasPermi="['product:brand:remove']">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页条组件 -->
        <!-- 分页显示，total大于0时显示，绑定页码和每页数量，进行分页操作 -->
        <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
            v-model:limit="queryParams.pageSize" @pagination="getList" />

        <!-- 添加或修改分类品牌对话框 -->
        <el-dialog :title="title" v-model="open" width="500px" append-to-body>
            <el-form ref="brandRef" :model="form" :rules="rules" label-width="80px">
                <!-- 对话框内表单项，用于输入品牌名称 -->
                <el-form-item label="品牌名称" prop="name">
                    <el-input v-model="form.name" placeholder="请输入品牌名称" />
                </el-form-item>
                <!-- 对话框内表单项，用于上传品牌图标 -->
                <el-form-item label="品牌图标" prop="logo">
                    <el-upload class="avatar-uploader" :action="imgUpload.url" :headers="imgUpload.headers"
                        :show-file-list="false" :on-success="handleAvatarSuccess">
                        <!-- 若已上传，则显示图标 -->
                        <img v-if="form.logo" :src="form.logo" class="avatar" />
                        <!-- 否则显示上传图标 -->
                        <el-icon v-else class="avatar-uploader-icon">
                            <Plus />
                        </el-icon>
                    </el-upload>
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <!-- 确定按钮，触发submitForm方法 -->
                    <el-button type="primary" @click="submitForm">确 定</el-button>
                    <!-- 取消按钮，触发cancel方法 -->
                    <el-button @click="cancel">取 消</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script setup name="Brand">
//引入api接口
import { listBrand, addBrand, getBrand, updateBrand, delBrand } from "@/api/product/brand";
//引入获取Token的方法
import { getToken } from "@/utils/auth.js";
//引入Element-plus的消息提示组件
// import { ElMessage, ElMessageBox } from 'element-plus'
/************************************************************************************************* */
//定义分页列表数据模型
const brandList = ref([]);
//定义列表总记录数模型
const total = ref(0);
//加载数据时显示的动效控制模型
const loading = ref(true);
//新增与修改弹出层控制模型
const open = ref(false);
//新增与修改弹出层标题模型
const title = ref("");
//定义批量操作id列表模型
const ids = ref([]);
//定义单选控制模型 默认值为非单选
const noSingle = ref(true);
//定义多选控制模型 默认值为多选未激活
const noSelect = ref(true);
// 获取当前实例对象
const { proxy } = getCurrentInstance();
//定义隐藏搜索控制模型
const showSearch = ref(true);
//Vue 3 中的两种响应式数据绑定方式：reactive 和 ref
//ref定义：基本数据类型，适用于简单的响应式数据
//reactive定义：对象（或数组）数据类型，则适用于复杂对象或数组的响应式数据
const data = reactive({
    //定义搜索模型
    queryParams: {
        pageNum: 1, //当前页码
        pageSize: 10, //每页显示数量
        name: null //品牌名称
    },
    //新增或修改表单数据模型
    form: {},
    // 图片上传配置模型
    imgUpload: {
        // 设置上传的请求头部
        headers: {
            Authorization: "Bearer " + getToken() //利用token进行身份认证
        },
        // 图片上传的方法地址:
        url: import.meta.env.VITE_APP_BASE_API + "/file/upload"
    },
    // 数据校验模型
    rules: {
        name: [{ required: true, message: "品牌名称不能为空", trigger: "blur" }],
        logo: [{ required: true, message: "品牌LOGO不能为空", trigger: "blur" }],
    }
});
//toRefs 是一个Vue3中提供的API，可将一个响应式对象转换为普通对象，其中属性变成了对原始对象属性的引用
const { queryParams, form, imgUpload, rules } = toRefs(data);


/************************************************************************************************* */
/** 查询品牌列表 */
function getList() {
    loading.value = true; //设置加载标识为true，表示正在加载
    listBrand(queryParams.value).then(response => {
        brandList.value = response.rows; //获取品牌数据并赋值
        total.value = response.total; //获取总记录数并赋值
        loading.value = false; //加载结束
    });
}

/** 搜索按钮操作 */
function handleQuery() {
    getList(); //执行查询列表操作
}

/** 重置按钮操作 */
function resetQuery() {
    // queryParams.value.pageNum = 1 //重置页码
    // queryParams.value.pageSize = 10 //重置每页数量
    // queryParams.value.name = null //重置品牌名称
    proxy.resetForm("queryRef"); // 重置搜索表单数据
    handleQuery(); //重新查询
}

// 表单重置
function reset() {
    form.value = {
        id: null, //重置表单数据
        name: null, //重置品牌名称
        logo: null //重置logo
    };
    // 重置表单数据
    // proxy是Vue3提供的一个全局对象，用于获取当前实例对象
    // resetForm()是Element-plus提供的一个方法，用于重置表单数据
    proxy.resetForm("brandRef"); // 重置品牌信息表单数据
}

/** 新增按钮操作 */
function handleAdd() {
    reset(); //重置表单
    open.value = true; //打开对话框
    title.value = "添加品牌"; //设置对话框标题
}

// 取消按钮
function cancel() {
    open.value = false; //关闭对话框
    reset(); //重置表单
}

// 修改按钮操作
// 修改按钮操作
function handleUpdate(row) {
    reset();
    const _id = row.id || ids.value
    getBrand(_id).then(response => {
        form.value = response.data;
        open.value = true;
        title.value = "修改品牌";
    });
}

// 提交按钮
function submitForm() {
    proxy.$refs["brandRef"].validate(valid => {
        if (valid) {
            if (form.value.id != null) {
                updateBrand(form.value).then(response => {
                    proxy.$modal.msgSuccess("修改成功");
                    open.value = false;
                    getList();
                });
            } else {
                addBrand(form.value).then(response => {
                    proxy.$modal.msgSuccess("新增成功");
                    open.value = false;
                    getList();
                });
            }
        }
    });
}

//上传
function handleAvatarSuccess(response, uploadFile) {
    console.log(response) //输出上传响应信息
    console.log(uploadFile) //输出上传文件信息
    form.value.logo = response.data.url //绑定上传成功后的图片URL
}

// 删除按钮操作
function handleDelete(row) {
    const _ids = row.id || ids.value; //判断是单个删除还是批量删除
    // ElMessageBox.confirm('是否确认删除分类品牌编号为"' + _ids + '"的数据项？', "系统提示", {
    //     confirmButtonText: '确定',
    //     cancelButtonText: '取消',
    //     type: "warning", //提示框类型为警告
    // }).then(function () {
    //     return delBrand(_ids); //确认后执行删除操作
    // }).then(() => {
    //     getList(); //删除成功后刷新列表
    //     ElMessage.success("删除成功"); //显示成功信息
    proxy.$modal.confirm("是否确认删除品牌编号为" + _ids + "的数据项？").then(function () {
        return delBrand(_ids); //确认后执行删除操作
    }).then(() => {
        getList(); //删除成功后刷新列表
        proxy.$modal.msgSuccess("删除成功"); //显示成功信息
    }).catch(() => { }); //捕获取消操作
}

// 多选框选中数据
function handleSelectionChange(selection) {
    ids.value = selection.map(item => item.id); //收集选中行的id
    noSingle.value = selection.length != 1; //设置默认非单选状态
    noSelect.value = !selection.length; //设置默认未选状态
}

//执行查询品牌列表
getList() //页面加载时，自动执行查询品牌列表方法
</script>
<style scoped>
.avatar-uploader .avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>

<style>
.avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
}
</style>